<template>
    <div class="fieldManage zy-content ">

      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <div>
              <p class="label">{{$t('common.Date')}}</p>
              <div class="ipt">
                <DatePicker type="date" format="yyyy-MM-dd" v-model="searchParams.scheduleDate"
                            :placeholder="`${$t('common.selectInfo')}`"/>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('公司')}}</p>
              <div class="ipt">
                <Select
                    v-model="searchParams.companyCode"
                    filterable
                    clearable
                    :placeholder="`${$t('common.selectInfo')}`"
                    @on-change="paramsCompanySelectChange"
                >
                  <Option v-for="(item, index) of companyList"
                          :value="item.code"
                          :label="item.name"
                          :key="index">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('厂区')}}</p>
              <div class="ipt">
                <Select
                    v-model="searchParams.factoryCode"
                    filterable
                    clearable
                    :placeholder="`${$t('common.selectInfo')}`"
                    @on-change="paramsFactorySelectChange"
                >
                  <Option v-for="(item, index) of factoryList"
                          :value="item.code"
                          :label="item.name"
                          :key="index">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('bigScreen.Line')}}</p>
              <div class="ipt">
                <Select
                    v-model="searchParams.lineCode"
                    filterable
                    clearable
                    :placeholder="`${$t('common.selectInfo')}`"
                >
                  <Option v-for="(item, index) of productionLineList"
                          :value="item.code"
                          :label="item.name"
                          :key="index">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('设备编号')}}</p>
              <div class="ipt">
                <Input
                    :placeholder="`${$t('common.inputInfo')}`"
                    clearable
                    type="text"
                    v-model="searchParams.deviceNo">
                </Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('设备名称')}}</p>
              <div class="ipt">
                <Input
                    :placeholder="`${$t('common.inputInfo')}`"
                    clearable
                    type="text"
                    v-model="searchParams.deviceName">
                </Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('班次')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.shift" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item, index) of productionShiftList"
                          :value="item.value"
                          :label="item.name"
                          :key="index">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div class="">
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn" type="primary" v-has="'ProductionScheduleSearch'" @click="changeNum()">
                    {{$t('common.Query')}}
                </Button>
                <Button
                    class="reset-btn"
                    @click="reset()"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>

      <div class="list-layout mt16">
        <div class="btns clear">
          <span class="title">{{ $t('common.listInformation') }}</span>
          <Button v-has="'ProductionScheduleExport'" @click="exportExcel">{{ $t('common.batchExport') }}</Button>
<!--            <Button @click="getTableColumns(columns)">-->
<!--                {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}-->
<!--            </Button>-->
        </div>

        <div class="tableContent">
          <Table  class="resizable-table" border @on-column-width-resize="onColumnWidthResize"  ellipsis ref="selection" :columns="columns" :data="tableData" @on-selection-change="onSelectChange">
            <template slot-scope="{ row }" slot="shiftStr">
              <span>{{ row.shiftStr + '（' + row.shiftStartTime + ' - ' + row.shiftEndTime + '）' }}</span>
            </template>
            <template slot-scope="{ row }" slot="timeFlag">
              <span>{{ row.timeFlag == 0 ? $t('否') : $t('是') }}</span>
            </template>
          </Table>
        </div>

        <div class="pageWrap mt16">
          <pageLeftTitle :total="pageHelper.total" :selected="tableDataIdList.length" />
          <Page :total="pageHelper.total" :page-size="pageHelper.pageSize" :page-size-opts="$variable.pageSizes"
                :current="pageHelper.pageNum"
                @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
        </div>
      </div>
    </div>
</template>

<script>
import {queryPage, exportExcel} from '@/api/system/production-input/production-schedule-detail.js'
import {getCompany, findOrgByLevel, selectDeviceList} from "@/api/index.js";
import fileDownload from "js-file-download";
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: "ProductionSchedule",
    components: {},
    mixins:[toggleTableOperation],
    data() {
        return {
            searchParams: {
                scheduleDate: '',
                companyId: '',
                factoryId: '',
                lineId: '',
                shift: '',
                deviceNo: '',
                deviceName: ''
            },
            columns: [
                {
                    key: "selection",
                    type: "selection",
                    width: 60,
                    align: "center",
                },
                {
                    // title: '日期',
                    title: `${ this.$t('common.Date') }`,
                    key: 'scheduleDate',
                    minWidth: 150,
                    align: 'center',
                    resizable: true
                },
                {
                   title: `${ this.$t('common.company') }`,
                    key: 'companyName',
                    align: 'center',
                    minWidth: 150,
                    resizable: true
                },
                {
                    // title: '厂区',
                    title: `${ this.$t('厂区') }`,
                    key: 'factoryName',
                    minWidth: 150,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: '产线',
                    title: `${ this.$t('bigScreen.Line') }`,
                    key: 'lineName',
                    minWidth: 150,
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${ this.$t('maintenance.EquipmentNo') }`,
                    key: 'deviceNo',
                    minWidth: 150,
                    align: 'center'
                },
                {
                   title: `${ this.$t('maintenance.EquipmentName') }`,
                    key: 'deviceName',
                    minWidth: 150,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: '班次',
                    title: `${ this.$t('班次') }`,
                    slot: 'shiftStr',
                    align: 'center',
                    minWidth: 260,
                    resizable: true
                },
                {
                    // title: '总时长',
                    title: `${ this.$t('总时长') }`,
                    key: 'totalTime',
                    minWidth: 150,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: '是否是生产时间',
                    title: `${ this.$t('是否是生产时间') }`,
                    slot: 'timeFlag',
                    minWidth: 200,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: '创建时间',
                    title: `${ this.$t('创建时间') }`,
                    key: 'createTime',
                    align: 'center',
                    minWidth: 180,
                    resizable: true
                }
            ],
            tableData: [],
            pageSizeOption: [10, 20, 30, 40],
            pageHelper: {
                pageSize: 10,
                pageNum: 1,
                total: 0,
            },
            checkBtnPermission: {},
            companyList: [],
            factoryList: [],
            productionLineList: [],
            tableDataIdList: [],
            deviceNoList: [],
            productionShiftList: [
                {
                    value: 0,
                    name: '早班（8H）'
                },
                {
                    value: 1,
                    name: '中班（8H）'
                },
                {
                    value: 2,
                    name: '白班（12H）'
                },
                {
                    value: 3,
                    name: '常白班（8H）'
                },
                {
                    value: 4,
                    name: '夜班（12H）'
                }
            ]
        }
    },
    created() {
        this.getColumnWidth(this.columns)
    },
    methods: {
      reset(){
        this.searchParams = {};
        this.changeNum();
      },
        changeNum() {
            this.pageHelper.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageHelper.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageHelper.pageNum = val;
            this.searchList();
        },
        searchList() {//查询列表

            if (this.searchParams.scheduleDate) {
                let scheduleDate = new Date(this.searchParams.scheduleDate);
                let year = scheduleDate.getFullYear();
                let month = scheduleDate.getMonth() + 1;
                let day = scheduleDate.getDate();
                scheduleDate = year + '-' + month + '-' + day;
                this.searchParams.scheduleDate = scheduleDate;
            }

            let params = {
                pageNum: this.pageHelper.pageNum,
                pageSize: this.pageHelper.pageSize,
                ...this.searchParams
            };

            queryPage(params).then(res => {
                if (res.code === 200) {
                    this.tableData = res.data.list
                    this.pageHelper.total = res.data.total
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        onSelectChange(selection) {
            this.tableDataIdList = selection.map((item) => item.id);
        },
        paramsCompanySelectChange() {
            if (this.searchParams.companyCode) {
                let obj = this.companyList.find(item => item.code === this.searchParams.companyCode);
                this.searchParams.companyName = obj.name;

                this.getFactoryList(this.searchParams.companyCode, 'factoryList');
            }else {
                this.productionLineList = []
                this.searchParams.factoryCode = ''
            }
        },
        paramsFactorySelectChange() {
            console.log(this.searchParams.factoryCode);
            if (this.searchParams.factoryCode) {
                this.getProductionLineList(this.searchParams.factoryCode, 'productionLineList');
            }else {
                this.productionLineList = []
                this.searchParams.lineCode = ''
            }
        },
        //获取公司
        getCompanyList() {
            findOrgByLevel({level: 2}).then(res => {
                if (res.code === 200) {
                    this.companyList = res.data
                } else {
                    this.companyList = []
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            }).finally(() => {
                this.loading = false
            })
        },
        getFactoryList(code, listKey, callback) {

            const obj = this.companyList.find(item => item.code === code)
            let params = {
                level: 3,
                parentId: obj.id
            }
            findOrgByLevel(params).then(res => {
                if (res.code === 200) {
                    this[listKey] = res.data
                    if (typeof callback === 'function')
                        callback()
                } else {
                    this[listKey] = []
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            }).finally(() => {
                this.loading = false
            })
        },
        getProductionLineList(floorCode, listKey) {
            const obj = (listKey === 'productionLineList' ? this.factoryList : this.factoryLists).find(item => item.code === floorCode)
            if (!obj.id) {
                this[listKey] = [];
                return;
            }
            let params = {
                level: 4,
                parentId: obj.id
            }
            findOrgByLevel(params).then(res => {
                if (res.code === 200) {
                    this[listKey] = res.data
                } else {
                    this[listKey] = []
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            }).finally(() => {
                this.loading = false
            })
        },
        getDeviceNoList(){
            selectDeviceList({deviceNo:"",assetsNo:""}).then(res => {
                if (res.code === 200) {
                    this.deviceNoList = res.data
                } else {
                    this.deviceNoList = []
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        factorySelectChange() {
            this.getProductionLineList();
        },
        exportExcel() {
            let params = {
                ...this.searchParams,
                ids: this.tableDataIdList
            }
            exportExcel(params).then(res => {
                fileDownload(res, '排班明细.xlsx');
            })
        }
    },
    mounted() {
        this.searchList();
        this.getCompanyList();
        this.getDeviceNoList();
    }
}
</script>

<style scoped lang="scss">
.fieldManage {
    .formList {
        padding: 30px;

        .btn {
            margin-top: 20px;
            text-align: center;
            width: 100%;
            height: 40px;
        }

        .inputBorder {
            border: 1px solid #dcdee2;
            border-radius: 4px;
        }
    }
}
</style>

<style lang="scss">

</style>
